<div class="page">

  <!-- <ng-container *ngFor="let pet of petGoods"> -->
<div class="item1">
    <!-- <h2>新品速递</h2> -->
    <ion-card color="warning">
        <ion-card-header>
          <ion-card-title>新品速递</ion-card-title>
        </ion-card-header>
      
        <ion-card-content> New Product </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-content>
          <ion-list>
            <div class="first">
            <ion-item >
                <img alt="Silhouette of mountains" src="../assets/img/商品01.jpg" />

                  <h5>商品名称: <br> &nbsp;牛肉味狗粮10kg<br>
                      商品价格:  $105rmb
                      库存数量:  100</h5>
        
            </ion-item>
          </div>
            <ion-item>
              
                <img alt="Silhouette of mountains" src="../assets/img/商品02.jpg" />

                <h5>商品名称: <br> &nbsp;鸡肉幼猫粮<br>
                  商品价格:  $45rmb <br>
                  库存数量:  100</h5>

            </ion-item>
      
            <ion-item>
              
                <img alt="Silhouette of mountains" src="../assets/img/商品03.jpg" />

                <h5>商品名称: <br> &nbsp;低敏小型犬成犬粮<br>
                  商品价格:  $60rmb
                  库存数量:  100</h5>
        
            </ion-item>
      
            <ion-item lines="none">
              
                <img alt="Silhouette of mountains" src="../assets/img/商品04.jpg" />

                <h5>商品名称: <br> &nbsp;小型犬成犬10kg<br>
                  商品价格:  $399rmb
                  库存数量:  100</h5>
          
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>

  <ion-card color="danger">
    <ion-card-header>
      <ion-card-title>礼盒专区</ion-card-title>
    </ion-card-header>
  
    <ion-card-content> Gift Section </ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-content>
      <ion-list>
        <div class="first">
        
        <ion-item>
          
            <img alt="Silhouette of mountains" src="../assets/img/商品07.jpg" />

            <h5>商品名称: <br> &nbsp;顽皮帆布包<br>
              商品价格:  $42rmb
              库存数量:  100</h5>
    
        </ion-item>
  
        <ion-item lines="none">
          
            <img alt="Silhouette of mountains" src="../assets/img/商品08.jpg" />

            <h5>商品名称: <br> &nbsp;可爱家居靠枕<br>
              商品价格:  $39rmb
              库存数量:  100</h5>
      
        </ion-item>
        <ion-item>
              
          <img alt="Silhouette of mountains" src="../assets/img/商品15.jpg" />

          <h5>商品名称: <br> &nbsp;狗狗项圈<br>
            商品价格:  $45rmb
            库存数量:  100</h5>
  
      </ion-item>

      <ion-item lines="none">
        
          <img alt="Silhouette of mountains" src="../assets/img/商品16.jpg" />

          <h5>商品名称: <br> &nbsp;猫头帆布包包<br>
            商品价格:  $29rmb
            库存数量:  100</h5>
    
      </ion-item>
    </div>
      </ion-list>
    </ion-card-content>
  </ion-card>


  <ion-card color="light">
    <ion-card-header>
      <ion-card-title>单品热门</ion-card-title>
    </ion-card-header>
  
    <ion-card-content> Single Hot </ion-card-content>
  </ion-card>
  <ion-card>
        <ion-card-content>
          <ion-list>
            <div class="first">
            <ion-item >
                <img alt="Silhouette of mountains" src="../assets/img/商品09.jpg" />

                  <h5>商品名称: <br> &nbsp;皇家K36幼猫猫粮<br>
                      商品价格:  $35rmb
                      库存数量:  100</h5>
        
            </ion-item>
          </div>
            <ion-item>
              
                <img alt="Silhouette of mountains" src="../assets/img/商品10.jpg" />

                <h5>商品名称: <br> &nbsp;无谷幼猫粮<br>
                  商品价格:  $48rmb <br>
                  库存数量:  100</h5>

            </ion-item>
      
            <ion-item>
              
                <img alt="Silhouette of mountains" src="../assets/img/商品11.jpg" />

                <h5>商品名称: <br> &nbsp;成犬鸡肉米配方犬粮<br>
                  商品价格:  $105rmb
                  库存数量:  70</h5>
        
            </ion-item>
      
            <ion-item lines="none">
              
                <img alt="Silhouette of mountains" src="../assets/img/商品12.jpg" />

                <h5>商品名称: <br> &nbsp;鸡肉猫粮5kg<br>
                  商品价格:  $134rmb
                  库存数量:  100</h5>
          
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>

  <ion-card color="medium">
    <ion-card-header>
      <ion-card-title>种草名单</ion-card-title>
    </ion-card-header>
  
    <ion-card-content> Love List </ion-card-content>
  </ion-card>
<ion-card>
        <ion-card-content>
          <ion-list>
            <div class="first">
            <ion-item >
                <img alt="Silhouette of mountains" src="../assets/img/商品13.jpg" />

                  <h5>商品名称: <br> &nbsp;牛肉味狗粮5kg<br>
                      商品价格:  $105rmb
                      库存数量:  100</h5>
        
            </ion-item>
          </div>
          <ion-item>
            
            <img alt="Silhouette of mountains" src="../assets/img/商品06.jpg" />

            <h5>商品名称: <br> &nbsp;牛肉幼犬8kg<br>
              商品价格:  $220rmb <br>
              库存数量:  100</h5>

        </ion-item>
            <ion-item>
              
                <img alt="Silhouette of mountains" src="../assets/img/商品14.jpg" />

                <h5>商品名称: <br> &nbsp;鸡肉幼猫粮10kg<br>
                  商品价格:  $200rmb <br>
                  库存数量:  100</h5>

            </ion-item>
      
            <ion-item >
              <img alt="Silhouette of mountains" src="../assets/img/商品05.jpg" />
  
                <h5>商品名称: <br> &nbsp;颗粒成犬粮10KG<br>
                    商品价格:  $210rmb
                    库存数量:  100</h5>
      
          </ion-item>
        
         
    
          </ion-list>
        </ion-card-content>
      </ion-card>
</div>
<!-- </ng-container> -->